import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Divider, Drawer, Button, Radio, message } from 'antd';
import styles from "./index.less";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TemplatePg = React.lazy(() => import('./templatePg'));
const AddFromP = React.lazy(() => import('./addFromP'));
const Automatic = React.lazy(() => import('./automatic'));
class ExtendRt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      value: 1,
      intellectualId: '',
    }
  }

  componentDidMount() {

    if (this.props.intellectualId) {
      this.setState({ intellectualId: this.props.intellectualId })
    }
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onChange = (e) => {

    this.setState({
      value: e.target.value,
    });
  }
  templateData = (val) => {


    this.setState({
      // visible: false,
    }, () => {
      this.props.templateData(val);
    })
  };

  addQus = (arr) => {
    this.setState({
      // visible: false,
    }, () => {
      if(arr.length){
        this.props.templateData(arr);
        message.success('添加成功！')
      }else{
        message.error('添加项为空')
      }


    })
  };

  addPoint = (arr) => {
    this.setState({
      visible: false,
    }, () => {
      this.props.templateData(arr);
    })
  }

  render() {

    const { getFieldDecorator } = this.props.form;
    const FormItemLayont = {
      labelCol: {
        xs: 24,
        sm: 3
      },
      wrapperCol: {
        xs: 24,
        sm: 20
      }
    }

    return (
      <span>
        {this.props.overall === 1 ? <Icon onClick={this.showDrawer} type="drag" style={{ fontSize: 20, marginLeft: 10, cursor: "pointer" }} /> : null}
        {/* {this.props.overall === 2 ? <Button onClick={this.showDrawer}>扩展相似句</Button> : null}   */}

        <Drawer
          destroyOnClose
          width='800px'
          title='< 返回'
          placement="right"
          onClose={this.onClose}
          visible={this.state.visible}
        >
          <div className={styles.flexxs}>
            <div>
              <Form layout='horizontal' className='ant' style={{ marginLeft: 20 }}>
                <FormItem {...FormItemLayont}>
                  {getFieldDecorator('userName', {
                    initialValue: '',
                  })(
                    <div>
                      <span >扩展方式</span>
                      <RadioGroup style={{ marginLeft: 30 }} onChange={this.onChange} value={this.state.value}>
                        <Radio value={1} style={{ marginLeft: 10 }}>自动推荐</Radio>
                        <Radio value={2} style={{ marginLeft: 10 }}>从问题库中添加</Radio>
                        {/* <Radio value={3} style={{ marginLeft: 10 }}>通过问题模版生成</Radio> */}
                      </RadioGroup>
                    </div>
                  )}
                </FormItem>
                <FormItem {...FormItemLayont}>
                  {/* {this.state.value === 3 ? <TemplatePg templateData={this.templateData}></TemplatePg> : ''}
            {this.state.value === 2 ? <AddFromP></AddFromP> : ''} */}
                </FormItem>
              </Form>
            </div>
            <div style={{ marginLeft: 20 }}>
              {this.state.value === 3 ? <TemplatePg templateData={this.templateData}></TemplatePg> : ''}
              {this.state.value === 2 ? <AddFromP addQuestions={(arr) => this.addQus(arr)}></AddFromP> : ''}
              {this.state.value === 1 ? <Automatic addPoint={(arr) => this.addPoint(arr)} intellectualId={this.state.intellectualId} questions={this.props.questions} ></Automatic> : ''}
            </div>
          </div>
        </Drawer>
      </span>
    );
  }
}
export default connect(({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(ExtendRt));

